import {
  getCartListAPI,
  postCartClearByIdAPI,
  postCartUpdateAPI,
} from '../../../apis/cart'
import { store, storeBehavior } from '../../../store/store'
import { behavior as computedBehavior } from 'miniprogram-computed'
import { setTabBarCount } from '../../../utils/utils'

const CART_SELECTED_IDS = 'CART_SELECTED_IDS'

Component({
  options: {
    // 允许组件共享全局样式或页面样式
    addGlobalClass: true,
  },
  properties: {
    safeBottom: {
      type: Boolean,
      value: false,
    },
  },
  // 导入 store 配置
  behaviors: [storeBehavior, computedBehavior],
  // 页面的初始数据
  data: {
    // 购物车列表
    list: [],
    // 是否全选
    isAllCheck: false,
    // 是否为首次加载
    isFirstLoad: true,
    // 选中的 id 集合-本地存储
    selectedIds: wx.getStorageSync(CART_SELECTED_IDS) || [],
  },
  // 计算属性
  computed: {
    // 0. 计算选中单品列表
    selectedList(data) {
      // 注意： computed 函数中不能访问 this ，只有 data 对象可供访问
      // 这个函数的返回值会被设置到 this.data.sum 字段中
      return data.list.filter((v) => v.selected && v.goods.stock_total > 0)
    },
    // 1. 计算选中总件数
    selectedListCount(data) {
      return data.selectedList.reduce((sum, v) => sum + v.goods_num, 0)
    },
    // 2. 计算选中总金额
    selectedListMoney(data) {
      return data.selectedList.reduce(
        (sum, v) => sum + v.goods_num * v.goods.goods_price_max,
        0,
      )
    },
    // 3. 计算全选状态
    isSelectedAll(data) {
      return data.list.length && data.list.every((v) => v.selected)
    },
  },
  // 监听数据变化
  watch: {
    // 监听选中的列表
    selectedList(val) {
      // 获取选中的 id 集合
      const selectedIds = val.map((v) => v.id)
      console.log(val, selectedIds)
      // 更新选中的 id 集合
      this.setData({ selectedIds })
      // 保存选中的 id 集合-本地存储
      wx.setStorageSync(CART_SELECTED_IDS, selectedIds)
    },
  },
  pageLifetimes: {
    // 页面显示
    show() {
      // 获取购物车列表
      this.getCartList()
    },
  },
  methods: {
    // 获取购物车列表
    async getCartList() {
      // 如果没登录，则不发送请求
      if (!store.isLogin) {
        // 更新界面，不是首次加载，展示空状态
        this.setData({
          isFirstLoad: false,
        })
        return
      }
      // 获取购物车列表
      const res = await getCartListAPI()
      // 获取选中的 id 集合-本地存储
      const { selectedIds } = this.data
      // 映射购物车列表，添加选中状态
      const list = res.data.list.map((v) => ({
        ...v,
        selected: selectedIds.includes(v.id),
      }))
      // 更新界面
      this.setData({
        list,
        isFirstLoad: false,
      })
      // 更新tabBar购物车数量
      setTabBarCount(res.data.cartTotal)
    },
    // 删除商品
    async onDelete(e) {
      // 二次确认
      const { confirm } = await wx.showModal({
        title: '您确定要删除该商品吗？',
      })
      // 确认删除
      if (confirm) {
        // 根据 id 删除商品
        const res = await postCartClearByIdAPI(e.mark.id)
        // 更新购物车列表数据
        this.setData({
          list: this.data.list.filter((v) => v.id !== e.mark.id),
        })
        // 更新购物车数量
        setTabBarCount(res.data.cartTotal)
      }
    },
    // 修改商品选中状态
    onChangeCheck(e) {
      // 获取列表
      const { list } = this.data
      // 获取索引
      const { index } = e.mark
      // 取反修改
      list[index].selected = !list[index].selected
      // 更新界面
      this.setData({ list })
    },
    // 修改购物车数量
    async onChangeStepper(e) {
      // 获取列表
      const { list } = this.data
      // 获取索引
      const { index, goods_id } = e.mark
      // 取反修改
      list[index].goods_num = e.detail
      // 更新界面
      this.setData({ list })
      // 修改购物车数量
      const res = await postCartUpdateAPI(goods_id, e.detail)
      // 更新购物车数量
      setTabBarCount(res.data.cartTotal)
    },
    // 全选
    onChangeAllCheck(e) {
      // 获取列表
      const { list } = this.data
      // 获取选中状态
      const selected = e.detail
      // 修改所有商品选中状态
      list.forEach((v) => (v.selected = selected))
      // 更新界面
      this.setData({ list })
    },
    // 提交订单
    onSubmit() {
      // 获取选中的 id 集合
      const { selectedIds } = this.data
      // 跳转到结算页面，并传递购买模式和选中的 id 集合
      wx.navigateTo({
        url: `/pages_order/checkout/checkout?mode=cart&cartIds=${selectedIds.join()}`,
      })
    },
  },
})
